<template>
  <view>
    <scroll-view
      class="scrollView"
      scroll-y
      enable-flex
      :refresher-triggered="triggered"
    >
      <view
        class="allContaienr"
        @click="clickCell(item)"
        v-for="(item, index) in reportList"
        :key="index"
      >
        <view class="itemCover">
          <img :src="item.coverImg" alt="" />
        </view>
        <view class="itemContent">
          <view class="itemTitle">{{ item.positionName }}</view>
          <view class="itemDesc">{{ item.positionDesc }}</view>
          <view class="itemBottom">
            <view class="readNum">{{ item.readNum }}</view>
            <view class="previewBtn">查看 ></view>
          </view>
        </view>
      </view>
      <view class="tips" v-if="reportList.length">没有更多啦</view>
      <Empty
        v-if="reportList.length <= 0"
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
      />
    </scroll-view>
  </view>
</template>

<script>
import Empty from '@/components/Empty.vue';
export default {
  props: {
    reportList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Empty
  },
  data() {
    return {
      productSign: '',
      topHeight: getApp().globalData.topHeight,
      emptyImg: this.$imgBaseSelf + 'common/empty.png'
    };
  },
  mounted() {},
  methods: {
    loadMore() {},
    clickCell(item) {
      this.handleViewReport(item);
    },
    //预览报告
    handleViewReport(item) {
      if (item) {
        uni.navigateTo({
          url: `/pagesSub/career/careerReportDetail/index?ylPositionId=${
            item.ylPositionId
          }&positionName=${item.positionName}&isBuy=${true}`
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$img-base-cdetail: $img-base + 'cdetail/';

.scrollView {
  box-sizing: border-box;
  height: calc(100vh - 488rpx);
}

.allContaienr {
  display: flex;
  border-radius: 32rpx;
  padding: 24rpx 32rpx 24rpx 24rpx;
  margin: 24rpx;
  background: #f4f6f8;
  border-radius: 16rpx;

  .itemCover {
    img {
      width: 124rpx;
      height: 174rpx;
      margin-right: 24rpx;
      border-radius: 8rpx;
    }
  }

  .itemContent {
    display: flex;
    flex-direction: column;
    flex: 1;

    .itemTitle {
      font-size: 32rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      color: #222222;
      line-height: 44rpx;
      margin-bottom: 12rpx;
    }

    .itemDesc {
      display: block;
      max-width: 501rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 36rpx;
      height: 36rpx;
      margin-bottom: 36rpx;
    }

    .itemBottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48rpx;

      .readNum {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 36rpx;
      }

      .previewBtn {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 48rpx;
      }
    }
  }
}
.tips {
  font-size: 28rpx;
  color: #999999;
  text-align: center;
  margin: 24rpx 0;
}
</style>
